<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">活动管理</a>
        </li>
        <li class="active">优惠券</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">优惠券列表</h4>
            <div class="row">
                <div class="col-xs-6">
                    <a id="add_room_btn" href="#big_order_modal" data-toggle="modal" class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加优惠券
                    </a>
                </div>
                <div class="col-xs-6">
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="big_order_table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>优惠券编号</th>
                        <th>优惠券金额（元）</th>
                        <th>满足条件（元）</th>
                        <th>数量（张）</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="big_order_modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">优惠券信息</h5>
                </div>
                <div class="modal-body">
                    <form id="big_order_form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="price"> 优惠券金额（元）</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="id" id="id" class="hidden"/>
                                    <input id="price" name="price" type="text" placeholder="请输入优惠券金额（元）"
                                           class="col-xs-9"
                                           onkeyup="this.value=this.value.replace(/\D/g,'')">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="suitPrice"> 满足条件（元）</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input id="suitPrice" name="suitPrice" type="text" placeholder="请输入满足条件（元）"
                                           class="col-xs-9" onkeyup="this.value=this.value.replace(/\D/g,'')">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="startTime"> 开始时间</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input id="startTime" name="startTime" type="text" placeholder="请输入开始时间"
                                           class="col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="endTime"> 结束时间</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input id="endTime" name="endTime" type="text" placeholder="请输入结束时间"
                                           class="col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="num"> 数量</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input id="num" name="num" type="number" min="0" placeholder="请输入下发数量或剩余数量"
                                           class="col-xs-9">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 取消
                    </button>
                    <button id="save_big_order_btn" type="button" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var big_order_table, big_order_validator;
        $(function () {
            big_order_table = $('#big_order_table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/ticketList'
                },
                columns: [
                    {
                        data: 'id',
                        defaultContent: ''
                    }, {
                        data: 'price',
                        defaultContent: ''
                    }, {
                        data: 'suitPrice',
                        defaultContent: ''
                    }, {
                        data: 'num',
                        defaultContent: ''
                    }, {
                        data: 'startTime',
                        defaultContent: ''
                    }, {
                        data: 'endTime',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            var editBtn, delBtn;
                            editBtn = '<a id="editBigOrder" href="javascript:;" data-row="' + row + '" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 编辑</a>';
                            delBtn = '&nbsp;&nbsp;<a id="delBigOrder" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 删除</a>';
                            return editBtn + delBtn;
                        }
                    }
                ]
            });

            //初始化表单校验
            big_order_validator = $("#big_order_form").validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    price: {
                        required: true
                    },
                    suitPrice: {
                        required: true
                    },
                    startTime: {
                        required: true
                    },
                    endTime: {
                        required: true
                    },
                    num: {
                        required: true
                    }
                },
                messages: {
                    price: {
                        required: "价格不能为空"
                    }, suitPrice: {
                        required: "满足价格不能为空"
                    }, startTime: {
                        required: "开始时间不能为空"
                    }, endTime: {
                        required: "结束时间不能为空"
                    }, num: {
                        required: "数量不能为空"
                    }
                }, highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                }, success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                    $(e).remove();
                }, errorPlacement: function (error, element) {
                    if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    } else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else {
                        error.insertAfter(element.parent());
                    }
                }
            });

            $('#startTime,#endTime').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                icons: {
                    time: 'fa fa-clock-o',
                    date: 'fa fa-calendar',
                    up: 'fa fa-chevron-up',
                    down: 'fa fa-chevron-down',
                    previous: 'fa fa-chevron-left',
                    next: 'fa fa-chevron-right',
                    today: 'fa fa-arrows ',
                    clear: 'fa fa-trash',
                    close: 'fa fa-times'
                }
            }).next().on(ace.click_event, function () {
                $(this).prev().focus();
            });

            $('#searchBtn').click(function () {
                var param = $("#searchForm").serialize();
                big_order_table.ajax.url("management/ticketList?" + param).load();
            });

            //点击编辑按钮，填充数据
            $("#big_order_table tbody").on("click", "#editBigOrder", function () {
                var row = big_order_table.row($(this).parents("tr")).data();
                $('#big_order_form').autofill(row);
                /* $("#provinceId").find("option[value=" + row.provinceId + "]").attr("selected", true);
                 $("#provinceId").trigger("change");
                 setTimeout(function () {
                     $("#cityId").find("option[value=" + row.cityId + "]").prop("selected", true);
                 }, 300)
                 $("#edit-modal").modal("show");*/
            });

            //模态框隐藏事件
            $("#big_order_modal").on("hide.bs.modal", function () {
                $("#big_order_form")[0].reset();
                big_order_validator.resetForm();
                $("#big_order_form .form-group").removeClass("has-error");
            });

            $('#big_order_table tbody').on('click', 'a#editBigOrder', function () {
                var row = big_order_table.row($(this).parents("tr")).data();
                $("#big_order_form").autofill(row);
                $("#big_order_modal").modal("show");
            });

            $("#save_big_order_btn").on("click", function () {
                if ($('#big_order_form').valid()) {
                    $.post('management/saveTicket', $('#big_order_form').serialize(), function () {
                        $("#big_order_modal").modal("hide");
                        big_order_table.ajax.reload();
                    });
                }
            });

            $('#big_order_table tbody').on('click', 'a#delBigOrder', function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要删除这个优惠券？", function (r) {
                    if (r) {
                        $.post("management/deleteTicket/" + id, function () {
                            big_order_table.ajax.reload();
                        });
                    }
                });
            });

        });
    </script>
</div>